<script lang="ts">
import {defineComponent, ref, watch} from "vue"

export default defineComponent({
  name: "app-pagination",
  emits: {
    change: (page_number: number, size_number: number) => true,
    onload: (event: { page_number: number, size_number: number }) => true
  },
  props: {
    total: {
      type: Number,
      default: true
    },
    page: {
      type: Number,
      default: true
    },
    size: {
      type: Number,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: "prev, pager, next,sizes,total"
    },
    pagerCount: {
      type: Number,
      default: 10
    }
  },
  setup(props, {emit}) {
    const pageSizes = [10, 15, 20, 25, 30, 35, 50, 70, 100]

    const page = ref(props.page)
    const size = ref(props.size)


    watch([() => props.page, () => props.size], value => {
      page.value = value[0]
      size.value = value[1]
    }, {
      deep: true
    })


    function paginationChange(page_number: number, size_number: number) {
      emit('change', page_number, size_number)
      emit('onload', {page: page_number, size: size_number})
    }

    return {
      pageSizes, page, size, paginationChange
    }
  }
})
</script>

<template>
  <el-pagination
      :disabled next-text="下一页"
      prev-text="上一页"
      :page-countss="pagerCount"
      :page-sizes="pageSizes"
      v-model:current-page="page"
      v-model:page-size="size"
      background
      @change="paginationChange"
      :layout
      :total
      size="default"
  >
  </el-pagination>
</template>